<template>
  <div class="page-container">
    <div id="dot" class="dot" />
    <div class="table-out">
      <div id="inner" class="table-inner">
        <div class="img-box"><img src="@/assets/images/剑姬.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/剑姬4.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/皎月.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/皎月2.jpg" class="img"></div>
        <div :class="['start-box',isStart ? 'active-box' : 'noactive-box']" @click="goRun"><div class="start-text">开始</div></div>
        <div class="img-box"><img src="@/assets/images/皎月3.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/男刀.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/男刀2.jpg" class="img"></div>
        <div class="img-box"><img src="@/assets/images/小鱼.jpg" class="img"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Turntable',
  components: {},
  data() {
    return {
      isStart: false
    }
  },
  mounted() {
    // const oDiv = document.getElementById('dot')
    // let color = 'yellow'
    // setInterval(() => {
    //   if (color === 'red') {
    //     oDiv.style.backgroundColor = 'yellow'
    //     color = 'yellow'
    //   } else {
    //     oDiv.style.backgroundColor = 'red'
    //     color = 'red'
    //   }
    // }, 1000)
  },
  methods: {
    goRun() {
      this.isStart = true
      var inner = document.getElementById('inner')
      var adiv = inner.getElementsByTagName('div')

      let num = 0
      setInterval(() => {
        for (var i = 0; i < 8; i = i + 1) {
          adiv[i].className = 'img-box'
        }
        num = num + 1
        adiv[num].className = 'img-box active-box'
      }, 1000)
    }
  }
}
</script>
<style scoped>
.table-out{
  margin: 100px auto 0;
  width: 400px;
  height: 400px;
  background-color: palevioletred;
  border-radius: 20px;
}
.table-inner {
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: purple;
  border-radius: 20px;
}
.active-box {
  background-color: red;
}
.noactive-box {
  background-color: aqua;
}
.start-box {
  float: left;
  width: 80px;
  height: 70px;
  margin: 0 10px;
}
.start-text {
  color: #fff;
}
.img-box {
  float: left;
  width: 100px;
  height: 100px;
}
.img {
  width: 80px;
  height: 70px;
}

</style>
